<template>
  <div class="table-box">
    <ProTable ref="proTable" title="采购单列表" row-key="id" :indent="20" :columns="columns" :request-api="getPurchaseList">
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="toCreate(0)"> 新增单据 </el-button>
      </template>
      <template #orderNo="scope">
        <el-button type="primary" text @click="toCreate(scope.row.id)">{{ scope.row.orderNo }}</el-button>
      </template>
      <template #operation="scope">
        <!-- <el-button
          v-if="!scope.row.checkFlag"
          v-auth="'check'"
          type="primary"
          link
          :icon="FolderChecked"
          @click="onCheck(scope.row)"
        >
          审核
        </el-button> -->
        <el-button
          v-if="scope.row.checkFlag"
          v-auth="'check'"
          type="primary"
          link
          :icon="FolderChecked"
          @click="onCheck(scope.row)"
        >
          查看
        </el-button>
        <el-button
          v-auth="'uncheck'"
          v-if="scope.row.checkFlag"
          type="primary"
          link
          :icon="FolderDelete"
          @click="onCancelCheck(scope.row)"
        >
          反审核
        </el-button>
        <el-button
          v-if="!scope.row.checkFlag"
          v-auth="'edit'"
          type="primary"
          link
          :icon="EditPen"
          @click="toCreate(scope.row.id)"
        >
          编辑
        </el-button>
        <el-button v-if="!scope.row.checkFlag" v-auth="'delete'" type="primary" link :icon="Delete" @click="deleteRow(scope.row)">
          删除
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="procureList">
import { Inventory } from "@/api/interface";
import {
  cancelCheckPurchase, // 反审核采购单

  /* getSupplierList：获取供应商列表 checkPurchase：审核采购单 */
  deletePurchase,
  getPurchaseList
} from "@/api/modules/inventory";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { checkFlag, deliveryStatus } from "@/utils/serviceDict";
import { CirclePlus, Delete, EditPen, FolderDelete } from "@element-plus/icons-vue";
import { onBeforeUpdate, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const proTable = ref<ProTableInstance>();
const router = useRouter();
const route = useRoute();
// 跳转详情页面
const toCreate = (id?: number) => {
  if (id !== 0) {
    router.push({
      path: "/procure/procureEdit",
      query: {
        id: id
      }
    });
  } else {
    router.push(`/procure/procureEdit`);
  }
};
const columns: ColumnProps<Inventory.ResPurchaseList>[] = [
  { type: "index", label: "序号", width: 60 },
  {
    prop: "orderDate",
    label: "订单日期",
    align: "left",
    minWidth: 164,
    search: {
      el: "date-picker",
      label: "单据日期",
      key: "timeValue",
      order: 1,
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD HH:mm",
        valueFormat: "YYYY-MM-DD HH:mm"
      }
    }
  },
  { prop: "orderNo", label: "单据编号", minWidth: 180, align: "left", search: { el: "input" } },
  {
    prop: "supplierName",
    label: "供应商",
    minWidth: 120,
    // 发请求渲染数据
    // enum: () => getSupplierList({ pageNum: 1, pageSize: 9999 }),
    align: "left",
    search: { el: "select" }
    // fieldNames: { label: "name", value: "id" }
  },
  // {
  //   prop: "amount",
  //   label: "订单金额",
  //   minWidth: 120,
  //   align: "left",
  //   enum: timeType,
  //   search: {
  //     el: "select",
  //     label: "日期类型",
  //     key: "timeType",
  //     order: 0,
  //     defaultValue: 0
  //   }
  // },
  { prop: "amount", label: "订单金额", minWidth: 120, align: "left", search: { el: "select" } },
  { prop: "checkFlag", label: "单据状态", minWidth: 120, enum: checkFlag, align: "left", search: { el: "select" } },
  { prop: "deliveryStatus", label: "收货状态", minWidth: 120, enum: deliveryStatus, align: "left" },
  { prop: "createTime", label: "创建时间", minWidth: 164, align: "left" },
  { prop: "remark", label: "备注", minWidth: 180, align: "left", search: { el: "input" } },
  { prop: "operation", label: "操作", width: 160 }
];

// const onCheck = async (params: Inventory.ResPurchaseList) => {
//   // 封装发请求的
//   // await useHandleData(checkPurchase, { id: params.id }, `审核编号【${params.orderNo}】采购单`);
//   // proTable.value?.getTableList();

//   console.log("params-->", params);
//   if (id !== 0) {
//     router.push({
//       path: "/inventory/procureEdit",
//       query: {
//         id: params.id
//       }
//     });
//   } else {
//     router.push(`/inventory/procureEdit`);
//   }
// };

// 查看数据
const onCheck = async (params: Inventory.ResPurchaseList) => {
  // 封装发请求的
  // await useHandleData(checkPurchase, { id: params.id }, `审核编号【${params.orderNo}】采购单`);
  // proTable.value?.getTableList();

  console.log("params-->", params);

  router.push({
    path: "/procure/procureEdit",
    query: {
      id: params.id
    }
  });
};

const onCancelCheck = async (params: Inventory.ResPurchaseList) => {
  await useHandleData(cancelCheckPurchase, { id: params.id }, `反审核编号【${params.orderNo}】采购单`);
  // 获取表格刷新的方法
  proTable.value?.getTableList();
};
// 删除
const deleteRow = async (params: Inventory.ResPurchaseList) => {
  await useHandleData(deletePurchase, { id: params.id }, `删除编号【${params.orderNo}】采购单`);
  proTable.value?.getTableList();
};

onBeforeUpdate(() => {
  if (route.query.upList) {
    proTable.value?.getTableList();
  }
});
</script>
